<template>
  <div class="box">
    <div class="box_top">
      <KqPageTop />
    </div>
    <div class="box_main" :style="roleName!=='杨青'?'':'height: 92%'">
      <XcPageMain />
    </div>
    <div v-if="roleName!=='杨青'" class="box_bot">
      <div class="bot_Btn">
        <div
          v-for="(item, index) in botList"
          :key="index"
          class="bot_item"
          :style="`background-image:url(${item.bgPic})`"
        >
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KqPageTop from '@/views/largeScreen/kqOnePage/components/KqPageTop';
import XcPageMain from '@/views/largeScreen/kqOnePage/components/XcPageMain';
export default {
  components: {
    KqPageTop,
    XcPageMain
  },
  data() {
    return {
      botList: [
        {
          title: '镇街收支',
          bgPic: require('@/assets/images/fullscreen/切换按钮选中.png')
        }
        // {
        //   title: "区级收支",
        //   bgPic: require("@/assets/images/fullscreen/切换按钮.png")
        // }
        // {
        //   title:'字段字段',
        //   bgPic:require("@/assets/images/fullscreen/切换按钮.png")
        // },
        // {
        //   title:'字段字段',
        //   bgPic:require("@/assets/images/fullscreen/切换按钮.png")
        // },
        // {
        //   title:'字段字段',
        //   bgPic:require("@/assets/images/fullscreen/切换按钮.png")
        // }
      ],
      btnItem: {},
      roleName: ''
    };
  },
  computed: {
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  created() {
    this.roleName = localStorage.getItem('xcNickName');
  },
  methods: {
    goTab(title) {
      if (title === '区级收支') {
        this.getItem(this.menuList, '/mapTest1/index.vue');
        this.goRoute(this.btnItem);
      } else if (title === '镇街收支') {
        this.getItem(this.menuList, '/largeScreen/kqOnePage/index.vue');
        this.goRoute(this.btnItem);
      }
    },
    getItem(arr, name) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].componentPath === name) {
          this.btnItem = arr[i];
        }
        if (arr[i].children) {
          this.getItem(arr[i].children, name);
        }
      }
    },
    goRoute(item) {
      const params = {
        path: item.path,
        query: {
          parentName: item.parentTitle,
          title: item.title,
          menuId: item.id,
          flag: 0,
          sId: 'TabsTable',
          isHideLeft: item.isHideLeft,
          isHideTop: item.isHideTop
          // isShow: true
        }
      };
      if (item.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.box {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/images/fullscreen/kqbg.png");
  background-size: 100% 100%;
}
.box_top {
  height: 8%;
}
.box_main {
  height: 86%;
  // height: 92%;
}
.box_bot {
  height: 6%;
  background-image: url("~@/assets/images/fullscreen/矩形 (2).png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  .bot_Btn {
    display: flex;
    // justify-content: space-between;
    justify-content: center;
    align-items: center;
    width: 38%;
    margin-right: 5%;
    .bot_item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18%;
      background-size: 100% 100%;
      height: 84%;
      cursor: pointer;
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #1fd2ff;
      }
    }
  }
}
</style>
